<!--
 * @description 活动详情
 * @author dumeng
 * @date 2021/9/17
 -->
<template>
  <section class="group-activity-detail">
    <section class="check-main">
      <el-card class="main-card">
        <section slot="header" class="clearfix">
          <span>活动详情</span>
        </section>
        <section class="card-info">
          <section class="info-item">
            <div class="item-label">活动名称：</div>
            <div class="item-content">{{ obj.activityName || '' }}</div>
          </section>
          <section class="info-item">
            <div class="item-label">小组名称：</div>
            <div class="item-content">{{ obj.groupName || '' }}</div>
          </section>
          <section class="info-item">
            <div class="item-label">活动时间：</div>
            <div class="item-content">{{ (obj.activityStartTime || '') + '至' + (obj.activityEndTime || '') }}</div>
          </section>
          <section class="info-item">
            <div class="item-label">活动地点：</div>
            <div class="item-content">{{ obj.activityAddress || '' }}</div>
          </section>
          <section class="info-item">
            <div class="item-label">报名人数：</div>
            <div class="item-content">{{ obj.registrationNum || '0' }}</div>
          </section>
          <section class="info-item">
            <div class="item-label">签到人数：</div>
            <div class="item-content">{{ obj.signNum || '0' }}</div>
          </section>
          <section class="info-item">
            <div class="item-label">活动封面：</div>
            <div class="item-content">
              <el-image
                class="cover-image"
                :src="view + obj.activityImg"
                :preview-src-list="[view + obj.activityImg]"
              >
                <div slot="error" class="image-slot">
                  <i class="el-icon-picture-outline" />
                </div>
              </el-image>
            </div>
          </section>
          <section class="info-item">
            <div class="item-label">活动内容：</div>
            <div class="item-content desc-wrap">{{ obj.activityContent || '' }}</div>
          </section>
          <section class="info-item">
            <div class="item-label">是否需要报名：</div>
            <div class="item-content">{{ obj.isRegistration === '1' ? '是' : '否' }}</div>
          </section>
          <section class="info-item">
            <div class="item-label">是否限制报名人员：</div>
            <div class="item-content">{{ obj.isGroupLimit === '1' ? '是' : '否' }}</div>
          </section>
          <section class="info-item">
            <div class="item-label">是否报名审核：</div>
            <div class="item-content">{{ obj.isAudit === '1' ? '是' : '否' }}</div>
          </section>
          <section class="info-item">
            <div class="item-label">是否允许职工上传花絮：</div>
            <div class="item-content">{{ obj.isTidbits === '1' ? '是' : '否' }}</div>
          </section>
          <section class="info-item">
            <div class="item-label">活动可见范围：</div>
            <div class="item-content">{{ obj.isVisualValue || '' }}</div>
          </section>
          <section class="info-item">
            <div class="item-label">是否推荐：</div>
            <div class="item-content">{{ obj.isRecommend === '1' ? '是' : '否' }}</div>
          </section>
        </section>
      </el-card>

    </section>

    <div class="check-footer">
      <el-button style="padding: 8px 30px;" @click="handleCancel">返回</el-button>
    </div>
  </section>
</template>
<script>
import { get } from '../api/activity'
import { mapGetters } from 'vuex'

export default {
  name: 'GroupActivityDetail',
  data() {
    return {
      i: '',
      obj: {},
      view: '/API-DOCUMENT/document/file/download?id='
    }
  },
  computed: {
    ...mapGetters([
      'backUrl'
    ])
  },
  created() {
    console.log('backUrl', this.backUrl)
    if (this.$route.query.i) {
      this.i = this.$route.query.i || ''
      this.getData()
    } else {
      this.$message({
        showClose: true,
        message: '参数异常！',
        type: 'warning',
        onClose: () => {
          this.$router.back()
        }
      })
    }
  },
  methods: {
    getData() {
      const loading = this.$loading({
        lock: true,
        text: '请稍后',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.3)'
      })
      return new Promise((resolve, reject) => {
        get({ id: this.i }).then(res => {
          loading.close()
          try {
            this.obj = res.data.data
          } catch (err) {
          }
          resolve()
        }).catch(error => {
          loading.close()
          reject(error)
        })
      })
    },

    handleCancel() {
      if (this.backUrl !== null) { // 如果是小组管理跳入的
        this.$router.push(this.backUrl)
      } else {
        this.$router.push({ path: this.$filterPath('activityManage'), query: { t: this.$route.query.t }})
      }
    }
  }
}
</script>
<style lang="scss">
.group-activity-detail {
  min-height: calc(100vh - 80px);
  max-height: calc(100vh - 80px);
  overflow: hidden;

  .check-main {
    position: absolute;
    top: 10px;
    left: 0;
    right: 0;
    bottom: 52px;
    padding: 0 10px;
    box-sizing: border-box;
    overflow: hidden;

    &::-webkit-scrollbar {
      width: 8px; /*对垂直流动条有效*/
      height: 1px; /*对水平流动条有效*/
    }

    /** 滚动条轨道*/
    &::-webkit-scrollbar-track {
      box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
      background-color: white;
      border-radius: 3px;
    }

    /** 滚动条里面小方块*/
    &::-webkit-scrollbar-thumb {
      height: 32px;
      border-radius: 5px;
      box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.1);
      background-color: #eaeaea;
    }

    &:hover {
      overflow: auto;
    }

    .card-info {
      .info-item {
        padding-bottom: 8px;
        vertical-align: top;
        display: flex;

        .item-label {
          color: rgba(0, 0, 0, 1);
          font-weight: 400;
          font-size: 14px;
          line-height: 1.5715;
          text-align: start;
        }

        .item-content {
          flex: 1 1;
          color: rgba(0, 0, 0, 0.85);
          font-size: 14px;
          line-height: 1.5715;
          word-break: break-word;
          overflow-wrap: break-word;

          .item-image {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
          }

          .el-image {
            width: 100px;
            height: 100px;
            margin-right: 10px;
            margin-bottom: 10px;

            .image-slot {
              background-color: #f5f7fa;
            }
          }
        }
      }
    }
  }

  .check-footer {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    text-align: center;
    padding: 10px 0;
    background-color: white;
    box-shadow: 0 -3px 6px #f5f5f5;
  }
}
</style>
